<script setup lang="ts">
import SysDialog from '@/components/SysDialog/index.vue';
import useBaseModel from '@/composables/cms/category/useBaseModel';
import useCategoryAddAndEdit from '@/composables/cms/category/useCategoryAddAndEdit';
import useDialog from '@/hooks/useDialog';

// 基础数据
const { addModel, rules } = useBaseModel()

// 弹框
const { dialog, onShow, onClose } = useDialog()

// 注册事件
const emit = defineEmits(['save'])

const { onConfirm, show, sortHandleChange, addCategoryForm, treeData, getCategorySort } = useCategoryAddAndEdit(dialog, onShow, onClose, addModel, emit)

// 暴露方法给外部使用
defineExpose({
    show
})

</script>
<template>
    <SysDialog :title="dialog.title" :height="dialog.height" :visible="dialog.visible" @onClose="onClose"
        @onConfirm="onConfirm">
        <template v-slot:content>
            <el-form :model="addModel" ref="addCategoryForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="parent_id" label="上级分类">
                            <el-tree-select v-model="addModel.parent_id" node-key="id" :data="treeData.data"
                                check-strictly @change="getCategorySort(addModel.parent_id)" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="name" label="分类名称">
                            <el-input v-model="addModel.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="sort" label="显示排序">
                            <el-input-number v-model="addModel.sort" class="mx-4" :min="0" controls-position="right"
                                @change="sortHandleChange" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="status" label="状态">
                            <el-radio-group v-model="addModel.status">
                                <el-radio label="1">正常</el-radio>
                                <el-radio label="2">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
    </SysDialog>
</template>
<style lang="scss" scoped>
</style>
